<template>
	<div>
		<div style="padding: 10px">
			<a-button type="primary"> 基本按钮 </a-button>
			<a-button>默认按钮</a-button>
			<a-button type="dashed"> 按钮 </a-button>
			<a-button type="danger"> 按钮 </a-button>
			<a-button type="primary"> 按钮 </a-button>
			<a-button type="link"> 按钮 </a-button>
			<a-switch default-checked />
			<a-spin />
		</div>
		<div>
			<a-progress :percent="30" />
			<a-progress :percent="50" status="active" />
			<a-progress :percent="70" status="exception" />
			<a-progress :percent="100" />
			<a-progress :percent="50" :show-info="false" />
		</div>
		<div>
			<a-slider id="test" :default-value="30" />
			<a-slider range :default-value="[20, 50]" />
		</div>
		<a-list bordered :data-source="dataList">
			<a-list-item slot="renderItem" slot-scope="item">
				{{ item }}
			</a-list-item>
		</a-list>

		<!-- seeting -->
		<div class="setting-box" :class="theme.mode">
			<div>
				<a-radio-group v-model="modeVal" @change="modeChange">
					<a-radio v-for="(val, key) in modeList" :key="key" :value="val">
						<div>{{ val }}</div>
						<div>
							{{
								val === 'dark'
									? '深色模式'
									: val === 'light'
									? '浅色模式'
									: val === 'night'
									? '晚间模式'
									: ''
							}}
						</div>
					</a-radio>
				</a-radio-group>
			</div>
			<div>
				<a-radio-group v-model="radioVal" @change="radioChange">
					<a-radio v-for="item in palettes" :key="item" :value="item">
						<div
							style="width: 20px; height: 20px; vertical-align: middle"
							:style="{ background: item }"
						></div>
					</a-radio>
				</a-radio-group>
			</div>
		</div>
		<h1>
			{{ $t('common.title') }}
		</h1>
		<a-button @click="setLang('zh_CN')">中文</a-button>
		<a-button @click="setLang('en_US')">English</a-button>
		<div class="testaaa"></div>
		<!-- seeting -->
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import ADMIN from '@/config/default/admin.config'
export default {
	name: 'Home',
	data() {
		return {
			dataList: [],
			modeVal: '',
			modeList: ADMIN.theme.mode,
			radioVal: '',
			palettes: ADMIN.palettes
		}
	},
	computed: {
		...mapState('setting', ['theme'])
	},
	methods: {
		...mapMutations('setting', ['setTheme', 'setLang']),
		radioChange() {
			this.setTheme({
				...this.theme,
				color: this.radioVal
			})
		},
		modeChange() {
			this.setTheme({
				...this.theme,
				mode: this.modeVal
			})
		}
	},
	created() {
		this.radioVal = this.theme.color
		this.modeVal = this.theme.mode
	},
	mounted() {
		console.log(this.$store)
	}
}
</script>

<style lang="less" scoped>
.setting-box {
	margin: 10px;
	padding: 10px;
	border-radius: 4px;
}
.setting-box.dark,
.setting-box.light {
	background-color: #ffffff;
}
.setting-box.night {
	background-color: #1e1e1e;
}
.testaaa {
	width: 100px;
	height: 100px;
	background: @background-color-base;
}
</style>
